/*
* 小丑面具 - 针对网页引导作用
* 调用 maskShow，在对应节点上留出空白，并在网上最上层生成遮罩
* 调用 closeMask，关闭遮罩层
* 调用 removeDom，销毁遮罩层
* 遮罩层级1001
* bgColor: 推荐使用rgba
* opacity：遮罩不透明度，（如果背景色使用rgba也会同时生效）
* */
class ClownMask {
  constructor(config) {
    this.config = Object.assign({
      zIndex: 1001,
      opacity: 1,
      bgColor: 'rgba(0,0,0,.6)'
    }, config);
    this.init();
  }

  removeDom() {
    let shadowBox = document.getElementsByClassName("clown-mask-shadowbox");
    let shadowDomArr = document.getElementsByClassName("clown-mask-shadow");
    let clownMaskGuide = document.getElementsByClassName("clown-mask-shadow-guide");
    if (shadowDomArr.length || shadowBox.length || clownMaskGuide.length) {
      for (let div of [shadowBox, ...shadowDomArr, ...clownMaskGuide]) {
        if (div.parentElement) {
          div.parentElement.removeChild(div);
        }
      }
    }
  }

  init() {
    this.removeDom();
    let {bgColor, opacity, zIndex} = this.config;
    let style = document.createElement("style");
    style.type = "text/css";
    style.innerHTML = `
      .clown-mask-shadowbox{position:fixed;top:0;left:0;z-index:${zIndex};width:100vw;height:100vh;display:none;}
      .clown-mask-shadowbox.show{display:block;}
      .clown-mask-shadow{background-color:${bgColor};opacity:${opacity};position: absolute;transition: transform .3s ease-out;transform: translate(0,0);}
      .clown-mask-top{top:-100%;left:0;width:100vw;height:100vh}
      .clown-mask-left{top:0;left:-100%;width:100vw;}
      .clown-mask-right{top:0;right:-100%;width:100vw;}
      .clown-mask-bottom{left:0;bottom:-100%;width:100vw;height:100vh}
      .clown-mask-shadow-guide {
        width: 280px;
        padding: 25px 0 20px;
        position: absolute;
        top: 100px;
        left: 300px;
        background-color: #fff;
        border-radius: 3px;
        transition: top,left .3s;
      }
      .clown-mask-guide-text {
        font-size: 13px;
        color: #666;
        text-align: center;
      }
      .clown-mask-shadow-guide .btn-guide {
        display: block;
        text-align: center;
        height: 24px;
        width: 72px;
        line-height: 24px;
        background: #9013fe;
        border-radius: 100px;
        font-size: 12px;
        color: #fff;
        margin: 14px auto 0;
        cursor:pointer;
      }
      .clown-mask-shadow-guide .guide-superscript {
        width: 20px;
        height: 20px;
        background-color: inherit;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        margin: auto;
      }
    `;
    document.head.appendChild(style);

    // 阴影外部容器
    let shadowBox = document.createElement("div");
    shadowBox.className = "clown-mask-shadowbox";
    document.body.appendChild(shadowBox);
    let divArr = [
      {
        className: "clown-mask-shadow clown-mask-top",
      }, {
        className: "clown-mask-shadow clown-mask-left",
      }, {
        className: "clown-mask-shadow clown-mask-right",
      }, {
        className: "clown-mask-shadow clown-mask-bottom",
      }
    ];
    for (let i = 0, len = divArr.length; i < len; i++) {
      let div = document.createElement("div");
      div.className = divArr[i].className;
      shadowBox.appendChild(div);
    }
    shadowBox.appendChild(ClownMask.guidePageEstablish());
  }

  static guidePageEstablish() {
    let guidePage = document.createElement("div");
    guidePage.className = "clown-mask-shadow-guide";
    let guideArr = [{
      element: "span",
      className: "guide-superscript"
    }, {
      element: "div",
      className: "clown-mask-guide-text"
    }, {
      element: "span",
      className: "btn-guide"
    }];
    for (let element of guideArr) {
      let dom = document.createElement(element.element);
      dom.className = element.className;
      guidePage.appendChild(dom);
    }
    return guidePage;
  }

  maskShow(guideConfig, callback) {
    let {offsetWidth, offsetHeight} = document.body;
    let dom = document.getElementsByClassName(guideConfig.className)[0]; // 读取dom
    let {top, left, right, bottom, width, height} = dom.getBoundingClientRect(); // 获取元素的绝对位置
    let shadowBox = document.getElementsByClassName("clown-mask-shadowbox")[0];
    let shadowDomArr = document.getElementsByClassName("clown-mask-shadow");
    let clownMaskGuide = document.getElementsByClassName("clown-mask-shadow-guide")[0];
    let clownMaskGuideText = clownMaskGuide.getElementsByClassName("clown-mask-guide-text")[0];
    let clownMaskGuideBtn = clownMaskGuide.getElementsByClassName("btn-guide")[0];

    shadowDomArr[0].style.transform = `translate(0,${top - 5}px)`;
    shadowDomArr[1].style.transform = `translate(${left - 5}px,${top - 5}px)`;
    shadowDomArr[1].style.height = `${height + 10}px`;
    shadowDomArr[2].style.transform = `translate(-${offsetWidth - right - 5}px,${top - 5}px)`;
    shadowDomArr[2].style.height = `${height + 10}px`;
    shadowDomArr[3].style.transform = `translate(0,-${offsetHeight - bottom - 5}px)`;

    clownMaskGuide.style.top = `${bottom + 20}px`;
    clownMaskGuide.style.left = `${left + width / 2 - 140}px`;
    clownMaskGuideText.innerHTML = guideConfig.text;
    clownMaskGuideBtn.innerText = guideConfig.btn;
    clownMaskGuideBtn.onclick = callback;

    shadowBox.classList.add("show");
  }

  closeMask() {
    let shadowBox = document.getElementsByClassName("clown-mask-shadowbox")[0];
    shadowBox.classList.remove("show");
  }
}

window._clownMask = new ClownMask();
